<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>atrament.js ~ demo</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css"/> <!-- 'classic' theme -->
    <script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
    <script src="../dist/atrament.min.js"></script>
    <script defer src="demo.js"></script>
    <style>
      canvas {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2;
      }

      form {
        z-index: 3;
        position: fixed;
        top: 300;
        left: 100;
        background: rgba(0, 0, 0, 0.7);
        padding: 1em;
        color: white;
        width: 16rem;
      }

      form * {
        margin-bottom: 1em;
      }

      input[type='checkbox'] {
        margin-right: 0.5rem;
        display: inline-block;
      }

      @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
        form * {
          font-size: 1.5em;
        }
      }

      body {
        background-image: url('img/bg.jpg');
        font-family: sans-serif;
        padding: 1em;
      }

      #clear {
        display: none;
      }

      .pickr {
        display: inline-block;
        height: 1.75em;
        overflow: hidden;
        border: solid 2px;
        border-radius: 5px;
        margin-bottom: 0;
        vertical-align: middle;
        margin-left: 5px;
      }
    </style>
  </head>
  <body>
    <h1>atrament.js</h1>
    <form>
      <button id="clear" onclick="event.preventDefault(); atrament.clear();">
        clear
      </button>
      <br />
      <label>Record</label><br />
      <input id="recordButton" type="button" value="Record a stroke" onclick="recordAStroke()"/><input id="playButton" type="button" value="Draw the recorded stroke" style="display:none" onclick="playRecorded()"/><br />
      <label>Thickness</label><br />
      <input
        type="range"
        min="1"
        max="40"
        oninput="atrament.weight = parseFloat(event.target.value);"
        value="2"
        step="0.1"
        autocomplete="off"
      /><br />
      <label for="smoothing">Smoothing</label><br />
      <input
        id="smoothing"
        type="range"
        min="0.1"
        max="2"
        onchange="atrament.smoothing = parseFloat(event.target.value);"
        value="0.85"
        step="0.05"
        autocomplete="off"
      /><br />
      <input
        id="adaptive"
        type="checkbox"
        onchange="atrament.adaptiveStroke = event.target.checked;"
        checked
        autocomplete="off"
      /><label for="adaptive">Adaptive stroke</label><br />
      <label>Mode</label>
      <select onchange="atrament.mode = event.target.value;" autocomplete="off">
        <option value="draw" default>Draw</option>
        <option value="fill" default>Fill</option>
        <option value="erase" default>Erase</option>
        <option value="disabled" default>Disabled</option>
      </select><br />
      <label>Colour</label>
      <div id="color-picker"></div><br />
      <output><pre id="events"></pre></output>
    </form>
    <canvas id="sketcher"></canvas>
    <a href="https://github.com/jakubfiala/atrament.js"
      ><img
        style="position: fixed; top: 0; right: 0; border: 0; z-index: 3;"
        src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
        alt="Fork me on GitHub"
        data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"
    /></a>
  </body>
</html>
